<template>
    <!-- 添加收货地址 -->
    <view class="y beijing">
        <view class="x jg">
            <span>姓名</span>
            <input type="text" v-model="from.name" placeholder="收货人姓名" />
        </view>
        <view class="x jg">
            <span>电话</span>
            <input type="text" v-model="from.tel" prefixIcon="person" focus placeholder="收货人手机号" />
        </view>
        <!-- 省市区选择器 -->
        <view class="x jg">
            <span>地区</span>
            <view style="flex: 5;">
                <view class="diqu">
                    <picker mode="region" @change="change1">
                        {{ from.province+from.city+from.county || '选择省/市/区' }}
                    </picker>
                </view>
            </view>
            <view class="dingwei">
                <img src="/static/定位.png" @click="hhh" />
            </view>
        </view>
        <view class="x jg">
            <span>详细地址</span>
            <input type="text" v-model="from.addressDetail" placeholder="街道门牌/楼层房间号等信息" />
        </view>
        <view class="jg1 x hxfx1">
            <p>设为默认收获地址</p>
            <switch color="#00aaff" @change="switch1Change" :checked="from.isDefault" />
        </view>
        <view class="bc spcz">
            <view class="baocun spcz" @click="baocun">
                <p>保存</p>
            </view>
        </view>
        <view class="sc spcz" v-if="from.id != ''">
            <view class="shanchu spcz" @click="shanchu">
                <p>删除</p>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                add: [],
                from: {
                    id: '',
                    name: '', //收货人名字
                    tel: '', //收货人手机号码
                    province: '', //选择省
                    city: '', //选择市
                    county: '', //选择区
                    addressDetail: '', //详细地址
                    isDefault: false //是否设为默认地址
                },
            }
        },
        // 一、在onLoad生命周期中接收   decodeURIComponent为uniapp提供的api
        // 二、JSON.parse 将转换传来的 JSON 字符串进行解析
        onLoad(obj) {
            const item = JSON.parse(decodeURIComponent(obj.item));
            console.log(item);
            this.from = item;
        },
        methods: {
            // 默认收货地址
            switch1Change: function(e) {
                let value = e.detail.value
                this.from.isDefault = value
                // console.log(e.)
                // console.log('switch1 发生 change 事件，携带值为', e.detail.value)
            },
            hhh() {
                // 微信地图定位
                uni.chooseLocation({
                    success: function(res) {
                        console.log('位置名称：' + res.name);
                        console.log('详细地址：' + res.address);
                        console.log('纬度：' + res.latitude);
                        console.log('经度：' + res.longitude);
                    },
                    fail(res) {
                        console.log(res);
                    }
                });
            },
            // 省/市/区
            change1: function(event) {
                const {
                    value
                } = event.detail;
                // this.add = value;
                this.from.province = value[0];
                this.from.city = value[1];
                this.from.county = value[2];
            },
            // 保存
            baocun() {
                if (this.from.name == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请填写姓名'
                    })
                } else if (this.from.tel.length != 11) {
                    uni.showToast({
                        icon: 'none',
                        title: '请正确填写手机号码'
                    })
                } else if (this.from.province == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请正确填写省/市/区地址'
                    })
                } else if (this.from.city == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请正确填写省/市/区地址'
                    })
                } else if (this.from.county == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请正确填写省/市/区地址'
                    })
                } else if (this.from.addressDetail == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请填写详细地址'
                    })
                } else if (this.from.isDefault == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '默认地址未打开'
                    })
                } else {
                    this.$api.post('/wx/address/save', this.from).then(res => {
                        // console.log(res)
                        uni.showToast({
                            title: '添加成功'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)

                    })

                }
            },
            // 删除
            shanchu() {
                this.$api.post('/wx/address/delete', this.from).then(res => {
                    // console.log(res)
                    uni.showModal({
                        title: '提示',
                        content: '你确定要删除吗',
                        success: function(res) {
                            if (this.from === null) {
                                uni.showToast({
                                    icon: 'none',
                                    title: '删除失败',
                                })
                                // console.log('删除失败')
                            } else {
                                uni.showToast({
                                    title: '删除成功',
                                })
                                setTimeout(() => {
                                    uni.navigateBack()
                                }, 1000)
                                // console.log('删除成功')

                            }
                        }
                    })
                })
            }
        }
    }
</script>

<style>
    html {
        background: #f1f1f1;
    }

    .beijing {
        background: #ffffff;
    }

    .jg {
        height: 70rpx;
        padding-top: 20rpx;
        padding-left: 30rpx;
        border-bottom: #f3f3f3 1rpx solid;
    }

    .jg span {
        width: 150rpx;
    }

    .jg input {
        padding-left: 10rpx;
    }

    .diqu {
        padding-left: 10rpx;
    }

    .dingwei {
        flex: 1;
    }

    .dingwei img {
        width: 50rpx;
        height: 50rpx;
    }

    .bc {
        padding-top: 80rpx;
    }

    .sc {
        padding-top: 30rpx;
        padding-bottom: 100rpx;
    }

    .baocun {
        width: 92%;
        height: 80rpx;
        border-radius: 100rpx;
        background: #ff5500;
        color: #ffffff;
    }

    .shanchu {
        width: 92%;
        height: 80rpx;
        border-radius: 100rpx;
        background: #ffffff;
        color: #000;
        border: solid 1px #f4f4f4;
    }

    .jg1 {
        padding-left: 30rpx;
        padding-top: 50rpx;
    }
</style>